<template>
    <div id="mr-history">
      <div class="history-tab">
        <button-tab v-model="demo01">
          <button-tab-item @on-item-click="consoleIndex()" selected>图片</button-tab-item>
          <button-tab-item @on-item-click="consoleIndex()" >文章</button-tab-item>
        </button-tab>
      </div>
      <div>
        <scroller lock-x scrollbar-y use-pullup  @on-pullup-loading="loadMore" v-model="status" ref="scroller" >
          <div class="box2">
            <div class="divcircle"></div>
            <ul class="template-ul use_img" v-show="demo01 === 0">
              <li is="choose-template" v-for="(choose,index) in historylist" :i="choose" :keyindex="index"></li>
              <div class="clear"></div>
            </ul>
            <content-list v-on:sharefriend="hideshared" v-for="(content,index) in historytext" :key="index" :c="content" v-show="demo01 === 1"></content-list>
          </div>
          <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
            <span v-show="status.pullupStatus === 'default'"></span>
            <span class="pullup-arrow" v-show="status.pullupStatus === 'down' || status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">松开加载</span>
            <span v-show="status.pullupStatus === 'loading'"><spinner type="ios-small"></spinner></span>
          </div>
        </scroller>
      </div>
      <share-float :shareshow="shareshow" v-on:sharefriends="hideshare"></share-float>
    </div>
</template>
<script>
var timeStamp = String(Number(new Date()))
import ChooseTemplate from '../comment/ChooseTemplate'
import ContentList from '../comment/ContentList'
import ShareFloat from '../comment/ShareFloat'
import { ButtonTab, ButtonTabItem, Scroller, Spinner } from 'vux'
import api from '../api'
import utils from '../utils'
export default {
  data () {
    return {
      historylist: [],
      historytext: [],
      demo01: 0,
      historyshow: false,
      shareshow: false,
      tokenval: '',
      PageNum: 100, // 记录每页数
      count: 1,
      status: {
        pullupStatus: 'default',
        pulldownStatus: 'default'
      }
    }
  },
  components: {
    ChooseTemplate,
    ButtonTab,
    ButtonTabItem,
    ContentList,
    Scroller,
    ShareFloat,
    Spinner
  },
  created () {
    window.document.title = '历史图片'
    this.tokenval = utils.AuthToken(timeStamp, this.$store.state.userkey)
    var params = {
      Tokenuser: this.tokenval,
      userid: this.$store.state.userID,
      timestamp: timeStamp,
      page: 1,
      perPage: 100
    }
    api.userimg(params).then(res => {
      console.log(res)
      if (res.status === '200') {
        this.historylist = res.data.list
      }
    })
  },
  methods: {
    hideshared () {
      this.shareshow = !this.shareshow
    },
    hideshare () {
      this.shareshow = !this.shareshow
    },
    loadMore () {
      this.count ++
      this.PageNum = 10 * this.count + 100
      this.$vux.loading.show({
        text: '加载更多'
      })
      setTimeout(() => {
        this.loadmore(this.PageNum)
        setTimeout(() => {
          this.$refs.scroller.donePullup()
        }, 10)
      }, 2000)
    },
    loadmore (index) {
      if (this.demo01 === 0) {
        var params = {
          Tokenuser: this.tokenval,
          userid: this.$store.state.userID,
          timestamp: timeStamp,
          page: 1,
          perPage: index
        }
        this.historylist = []
        api.userimg(params).then(res => {
          console.log(res)
          if (res.status === '200') {
            this.historylist = res.data.list
          }
        })
      } else if (this.demo01 === 1) {
        var paramcollect = {
          Tokenuser: this.tokenval,
          userid: this.$store.state.userID,
          timestamp: timeStamp,
          page: 1,
          perPage: index
        }
        api.articlecollect(paramcollect).then(res => {
          console.log(res)
          if (res.status === '200') {
            this.historytext = res.data.list
          }
        })
      }
    },
    consoleIndex () {
      this.loadmore(this.PageNum)
    }
  }
}
</script>
